<template>
	<div class="dialog-container">
		<el-dialog title="房号选择" :visible.sync="centerDialogVisible1" width="860px" top="10vh" @close="handleClose()">
			<el-form :inline="true" :model="formInline" class="demo-form-inline" @submit.native.prevent>
				<el-form-item label="楼栋选择">
					<el-cascader :options="orgHouse" :props="{value:'id',label:'name',emitPath:false}" filterable
						clearable v-model="formInline.org_id" @change="search()"></el-cascader>
				</el-form-item>
				<el-form-item label="房号">
					<el-input placeholder="请输入房号" clearable v-model="formInline.roomName" @change="search()" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
				</el-form-item>
			</el-form>

			<el-table ref="singleTable" :data="list" style="width: 100%;" border>
				<el-table-column label="房源地址" prop="address"></el-table-column>
				<el-table-column label="房号" prop="room_number"></el-table-column>
				<el-table-column label="小区名称" prop="xq_name"></el-table-column>
				<el-table-column label="操作" fixed="right" width="160">
					<template slot-scope="scope">
						<el-button type="success" v-if="currentRow&&currentRow.id==scope.row.id"  size="mini" 
						@click="setCurrent(scope.row)">已选中</el-button>
						<el-button v-else size="mini" @click="setCurrent(scope.row)">请选择</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="page-block" style="margin-top: 20px;">
				<el-pagination background :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="totalRow" :pager-count="pageCount"
					@size-change="handleSizeChange" @current-change="handleCurrentChange" />
			</div>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose()">取 消</el-button>
				<el-button type="primary" @click="sel()">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import Api from '@/api/pages/wuye/fy.js';

	export default {
		name: 'selHouse',
		props: {
			wyId: {
				type: String,
				default: '',
			}
		},
		data() {
			return {
				centerDialogVisible1: true,
				pageSize: 10, // 每页条数
				pageCount: 7, //
				pageSizes: [10, 20, 30, 50], // 个数选择器
				page: 1,
				size: 10,
				currentPage: 1,
				totalRow: 0,
				formInline: {
					id: '',
					org_id: '',
					roomName: ''
				},
				orgHouse: [],
				list: [],
				currentRow: null
			}
		},
		mounted() {
			this.formInline.id = this.wyId;
			this.loadWuYeHouseStructure();
			this.getData();
		},
		methods: {
			// 选中当前行
			setCurrent(row) {
				// console.log(row)
				this.$refs.singleTable.setCurrentRow(row);
				this.currentRow = row;
			},

			search() {
				this.page = 1;
				this.currentRow = null;
				this.getData();
			},
			handleSizeChange(val) {
				this.size = val;
				this.page = 1;
				this.getData();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getData();
			},
			// 获取房源
			getData() {
				let data = {
					pageNumber: this.page,
					pageSize: this.size,
					xiaoqu_id: this.formInline.id,
					room_number: this.formInline.roomName,
					org_id: this.formInline.org_id
				};
				Api.query(data).then(res => {
					if (res.state) {
						this.list = res.data.list;
						this.totalRow = res.data.totalRow;
					} else {
						this.$message(res.msg);
					}
				});
			},

			// 获取房源组织树
			loadWuYeHouseStructure() {
				Api.loadWuYeHouseStructure({},false).then(res => {
					if (res.state) {
						let arr = res.data;
						arr.forEach(d => {
							d.children.forEach(j => {
								if (j.xiaoqu_id == this.formInline.id) {
									this.orgHouse = j.children;
									// console.log(this.orgHouse)
								}
							})
						})
					} else {
						this.$message(res.msg);
					}
				});
			},
			
			// 确定
			sel(){
				if(!this.currentRow){
					this.$message.error('请选择房号');
					return
				}
				this.handleClose(this.currentRow);
			},

			//关闭
			handleClose(done) {
				this.centerDialogVisible1 = false;
				this.$parent.colSelHouse(done);
			},

		}
	}
</script>

<style lang="scss" scoped>

</style>
